<template>
  <div class="base-grid-toolbar common-toolbar" ref="toolbar">
    <!-- 下拉 -->
    <div class="grid-toolbar-mini" v-show="!showBtns">
      <o-tool-button
        type="dropdown"
        :transfer="true"
        @on-click="handleToolDropClick"
        icon="wy-icon wy-Hamburg"
        placement="bottom-start"
        class="hamberg-btn"
      >
        <div slot="drop">
          <DropdownItem
            name="setup"
            v-if="config.setup.isShow"
            :disabled="config.setup.isDisable || !config.edit.auth"
            ><Icon custom="wy-icon wy-insert" class="drop-icon" /><span>{{
              $srv.getI18nByPath('vxe.toolbar.setup')
            }}</span></DropdownItem
          >
          <DropdownItem
            v-if="config.insert && config.insert.isShow"
            name="insert_actived"
            :disabled="config.insert.isDisable || !config.insert.auth"
            ><Icon custom="wy-icon wy-insert" class="drop-icon" /><span>{{
              $srv.getI18nByPath('vxe.toolbar.insert')
            }}</span></DropdownItem
          >
          <Dropdown
            transfer
            v-if="config.delete && config.delete.isShow"
            placement="right-start"
          >
            <DropdownItem
              name="delete"
              :disabled="config.delete.isDisable || !config.delete.auth"
              ><Icon custom="wy-icon wy-huishouzhan1" class="drop-icon"/><span
                >{{ $srv.getI18nByPath('vxe.toolbar.remove') }}</span
              ><Icon type="ios-arrow-forward"></Icon
            ></DropdownItem>
            <DropdownMenu slot="list">
              <DropdownItem
                name="remove"
                :disabled="config.delete.isDisable || !config.delete.auth"
                ><span>{{
                  $srv.getI18nByPath('vxe.toolbar.temporaryRemove')
                }}</span></DropdownItem
              >
              <!-- <DropdownItem
                name="delete"
                :disabled="config.delete.isDisable || !config.delete.auth"
                ><span>{{
                  $srv.getI18nByPath('vxe.toolbar.directRemove')
                }}</span></DropdownItem
              > -->
            </DropdownMenu>
          </Dropdown>
          <DropdownItem
            v-if="config.edit && config.edit.isShow"
            name="edit"
            :disabled="config.edit.isDisable || !config.edit.auth"
            ><Icon custom="wy-icon wy-bianji" class="drop-icon" /><span>{{
              config.edit.value
                ? $srv.getI18nByPath('vxe.toolbar.cancelEdit')
                : $srv.getI18nByPath('vxe.toolbar.edit')
            }}</span></DropdownItem
          >
          <DropdownItem
            v-if="config.save && config.save.isShow"
            name="save"
            :disabled="
              config.save.isDisable ||
                (!config.insert.auth && !config.edit.auth)
            "
            ><Icon custom="wy-icon wy-baocun41" class="drop-icon" /><span>{{
              $srv.getI18nByPath('vxe.toolbar.save')
            }}</span></DropdownItem
          >
          <DropdownItem
            v-if="config.refresh.isShow"
            :disabled="!config.import.auth"
            name="clearFilters"
            ><Icon custom="wy-icon wy-quxiaoshaixuan" class="drop-icon" /><span
              >{{ $srv.getI18nByPath('vxe.toolbar.clearFilter') }}</span
            ></DropdownItem
          >
          <DropdownItem v-if="config.refresh.isShow" name="reload"
            ><Icon custom="wy-icon wy-shuaxin13" class="drop-icon" /><span>{{
              $srv.getI18nByPath('vxe.toolbar.refresh')
            }}</span></DropdownItem
          >
          <DropdownItem
            v-if="config.requestAudit && config.requestAudit.isShow"
            name="requestAudit"
            :disabled="
              config.requestAudit.isDisable || !config.requestAudit.auth
            "
            ><Icon custom="wy-icon wy-gongyinglian" class="drop-icon" /><span>{{
              config.requestAudit
                ? $srv.getI18nByPath('vxe.toolbar.requestAudit')
                : $srv.getI18nByPath('vxe.toolbar.antiAudit')
            }}</span></DropdownItem
          >
          <!-- 导入 -->
          <DropdownItem
            v-if="config.import.isShow"
            :disabled="!config.import.auth"
            name="open_import"
            ><Icon custom="wy-icon wy-daoru10" class="drop-icon" /><span>{{
              $srv.getI18nByPath('vxe.toolbar.import')
            }}</span></DropdownItem
          >
          <!-- 导出 -->
          <DropdownItem
            v-if="config.export.isShow"
            :disabled="!config.export.auth"
            name="open_export"
            ><Icon custom="wy-icon wy-daochu4" class="drop-icon" /><span>{{
              $srv.getI18nByPath('vxe.toolbar.export')
            }}</span></DropdownItem
          >
          <!-- 导出XML -->
          <DropdownItem
            v-if="config.exportXML.isShow"
            :disabled="!config.exportXML.auth"
            name="export_xml"
            ><Icon custom="wy-icon wy-output-xml" class="drop-icon" /><span>{{
              $srv.getI18nByPath('vxe.toolbar.export_xml')
            }}</span></DropdownItem
          >
          <DropdownItem v-if="config.qbeSearch.isShow" name="tableQuery"
            ><Icon custom="wy-icon wy-query1" class="drop-icon" /><span>{{
              $srv.getI18nByPath('vxe.toolbar.QBE')
            }}</span></DropdownItem
          >
          <DropdownItem v-if="config.bancodeScan.isShow" name="bancodeScan"
            ><Icon custom="wy-icon wy-saoma" class="drop-icon" /><span>{{
              $srv.getI18nByPath('vxe.toolbar.bancodeScan')
            }}</span></DropdownItem
          >
          <DropdownItem
            v-if="config.print.isShow"
            :disabled="!config.print.auth"
            name="print"
            ><Icon custom="wy-icon wy-dayin" class="drop-icon" /><span>{{
              $srv.getI18nByPath('vxe.toolbar.print')
            }}</span></DropdownItem
          >

          <template v-if="config.addon">
            <template v-for="(item, idx) of config.addon">
              <Dropdown
                v-if="item.children.length > 0"
                :disabled="!item.auth"
                placement="right-start"
                :key="idx"
                v-show="item.isShow"
              >
                <DropdownItem
                  ><Icon
                    :custom="'wy-icon ' + item.icon"
                    class="drop-icon"/><span>{{
                    $srv.getI18nBySrv(item.title)
                  }}</span
                  ><Icon type="ios-arrow-forward"></Icon
                ></DropdownItem>
                <DropdownMenu slot="list">
                  <DropdownItem :name="'custom-' + idx" :disabled="!item.auth"
                    ><span>{{ $srv.getI18nBySrv(item.title) }}</span>
                  </DropdownItem>
                  <template v-for="(d, sidx) of item.children">
                    <DropdownItem
                      :name="'custom-' + idx + '-' + sidx"
                      :disabled="!d.auth"
                      :key="sidx"
                      ><span>{{ d.title }}</span></DropdownItem
                    >
                  </template>
                </DropdownMenu>
              </Dropdown>
              <DropdownItem
                v-else
                :key="idx"
                :name="'custom-' + idx"
                :disabled="!item.auth"
                v-show="item.isShow"
                ><Icon
                  :custom="'wy-icon ' + item.icon"
                  class="drop-icon"
                /><span>{{ $srv.getI18nBySrv(item.title) }}</span></DropdownItem
              >
            </template>
          </template>
        </div>
      </o-tool-button>
      <!-- <Input
        search
        class="grid-search"
        size="small"
        :placeholder="$srv.getI18nByPath('vxe.toolbar.enterContent') + '...'"
        v-model="globalSearchValue"
        @on-search="globalSearch"
        @on-change="globalSeachValChange"
        name="global"
        style="width: 180px"
        v-show="showMiniSearch"
      /> -->
      <Input
        class="grid-search"
        size="small"
        :placeholder="
          $srv.getI18nByPath(
            `vxe.toolbar.${
              searchType === 'lexicon'
                ? 'enterWordContent'
                : 'enterFuzzyContent'
            }`
          ) + '...'
        "
        v-model="globalSearchValue"
        @on-enter="globalSearch"
        @on-change="globalSeachValChange"
        name="global"
        style="width: 180px"
        v-show="showMiniSearch"
      >
        <template #append>
          <span
            v-if="searchType === 'lexicon'"
            class="wy-icon wy-minganguanjianzi icon-btn"
            @click="globalSearch"
          ></span>
          <span
            v-else
            class="wy-icon wy-search icon-btn"
            @click="globalSearch"
          ></span>
          <span
            v-if="searchIsSwitch"
            class="wy-icon wy-mti-qiehuan2 icon-btn"
            @click="switchSearchMode"
          ></span>
        </template>
      </Input>
    </div>

    <!-- 左边 -->
    <div
      class="grid-toolbar-left"
      ref="barLeft"
      v-show="showBtns && display.left"
    >
      <!-- 新建功能 -->
      <o-tool-button
        v-if="config.setup.isShow"
        :disabled="config.setup.isDisable || !config.edit.auth"
        type="button"
        @on-click="funSetUp"
        icon="wy-icon wy-insert"
        :title="$srv.getI18nByPath('vxe.toolbar.setup')"
        :showtitle="showText"
      >
      </o-tool-button>
      <!-- insert -->
      <o-tool-button
        v-if="config.insert && config.insert.isShow"
        :disabled="config.insert.isDisable || !config.insert.auth"
        type="button"
        @on-click="$emit('commit-event', 'insert_actived')"
        icon="wy-icon wy-insert"
        :title="$srv.getI18nByPath('vxe.toolbar.insert')"
        :showtitle="showText"
      >
      </o-tool-button>
      <!-- 直接删除 -->
      <o-tool-button
        v-if="config.delete && config.delete.isShow"
        color="error"
        :disabled="config.delete.isDisable || !config.delete.auth"
        type="dropdown"
        :select="true"
        @on-click="$emit('commit-event', $event === null ? 'delete' : $event)"
        icon="wy-icon wy-huishouzhan1"
        :title="$srv.getI18nByPath('vxe.toolbar.remove')"
        :showtitle="showText"
      >
        <div slot="drop">
          <!-- 临时删除 -->
          <DropdownItem
            name="remove"
            :disabled="config.delete.isDisable || !config.delete.auth"
            >{{
              $srv.getI18nByPath('vxe.toolbar.temporaryRemove')
            }}</DropdownItem
          >
        </div>
      </o-tool-button>
      <!-- save -->
      <o-tool-button
        v-if="config.save && config.save.isShow"
        :disabled="
          config.save.isDisable || (!config.insert.auth && !config.edit.auth)
        "
        type="button"
        @on-click="$emit('commit-event', 'save')"
        icon="wy-icon wy-baocun41"
        :title="$srv.getI18nByPath('vxe.toolbar.save')"
        :showtitle="showText"
      >
      </o-tool-button>
      <!-- 编辑/取消编辑 -->
      <o-tool-button
        v-if="config.edit && config.edit.isShow"
        :disabled="config.edit.isDisable || !config.edit.auth"
        :showtitle="showText"
        type="switch"
        v-model="config.edit.value"
        :switchlist="[
          {
            icon: 'wy-icon wy-bianji',
            value: false,
            title: $srv.getI18nByPath('vxe.toolbar.edit')
          },
          {
            icon: 'wy-icon wy-yiquxiao',
            value: true,
            title: $srv.getI18nByPath('vxe.toolbar.cancelEdit')
          }
        ]"
        @on-click="$emit('commit-event', 'edit', $event)"
      ></o-tool-button>
      <!-- 审核/反审核 -->
      <o-tool-button
        v-if="config.audit && (config.audit.isShow || config.unaudit.isShow)"
        :disabled="
          config.audit.value
            ? config.audit.isDisable || !config.unaudit.auth
            : config.audit.isDisable || !config.audit.auth
        "
        :showtitle="showText"
        type="switch"
        :manually="true"
        v-model="config.audit.value"
        :switchlist="[
          {
            icon: 'wy-icon wy-shenhe',
            value: false,
            title: $srv.getI18nByPath('vxe.toolbar.audit')
          },
          {
            icon: 'wy-icon wy-fanshenhe1',
            value: true,
            title: $srv.getI18nByPath('vxe.toolbar.unaudit')
          }
        ]"
        @on-click="$emit('commit-event', 'check', $event)"
      ></o-tool-button>

      <!-- 送审 -->
      <!-- <o-tool-button
        v-if="config.requestAudit && config.requestAudit.isShow"
        :disabled="config.requestAudit.isDisable || !config.requestAudit.auth"
        type="button"
        @on-click="$emit('commit-event', 'requestAudit')"
        icon="wy-icon wy-gongyinglian"
        :title="$srv.getI18nByPath('vxe.toolbar.requestAudit')"
        :showtitle="showText"
      >
      </o-tool-button> -->

      <!-- 送审/反审核 -->
      <o-tool-button
        v-if="
          config.requestAudit &&
            (config.requestAudit.isShow || config.antiAudit.isShow) &&
            config.requestAudit.auth &&
            config.antiAudit.auth
        "
        :disabled="
          config.requestAudit.value
            ? config.requestAudit.isDisable || !config.antiAudit.auth
            : config.requestAudit.isDisable || !config.requestAudit.auth
        "
        :showtitle="showText"
        type="switch"
        :manually="true"
        v-model="config.requestAudit.value"
        :switchlist="[
          {
            icon: 'wy-icon wy-gongyinglian',
            value: false,
            title: $srv.getI18nByPath('vxe.toolbar.requestAudit')
          },
          {
            icon: 'wy-icon wy-fanshenhe1',
            value: true,
            title: $srv.getI18nByPath('vxe.toolbar.antiAudit')
          }
        ]"
        @on-click="$emit('commit-event', 'requestAudit', $event)"
      ></o-tool-button>

      <!-- 审核状态 -->
      <o-tool-button
        v-if="
          config.auditStatus &&
            config.auditStatus.isShow &&
            config.auditStatus.auth
        "
        :disabled="config.auditStatus.isDisable || !config.auditStatus.auth"
        type="button"
        @on-click="$emit('commit-event', 'auditStatus')"
        icon="wy-icon wy-priority1"
        :title="$srv.getI18nByPath('vxe.toolbar.auditStatus')"
        :showtitle="showText"
      >
      </o-tool-button>

      <!-- 撤销审批 -->
      <o-tool-button
        v-if="
          config.revokeApproval &&
            config.revokeApproval.isShow &&
            config.revokeApproval.auth
        "
        :disabled="
          config.revokeApproval.isDisable || !config.revokeApproval.auth
        "
        type="button"
        @on-click="$emit('commit-event', 'revokeApproval')"
        icon="wy-icon wy-chexiaoshenhe"
        :title="$srv.getI18nByPath('vxe.toolbar.revokeApproval')"
        :showtitle="showText"
      >
      </o-tool-button>

      <!-- 过账/取消过账 -->
      <o-tool-button
        v-if="
          config.accountPosted &&
            (config.accountPosted.isShow || config.cancelPost.isShow) &&
            config.accountPosted.auth &&
            config.cancelPost.auth
        "
        :disabled="
          config.accountPosted.value
            ? config.accountPosted.isDisable || !config.cancelPost.auth
            : config.accountPosted.isDisable || !config.accountPosted.auth
        "
        :showtitle="showText"
        type="switch"
        :manually="true"
        v-model="config.accountPosted.value"
        :switchlist="[
          {
            icon: 'wy-icon wy-guozhang',
            value: false,
            title: $srv.getI18nByPath('vxe.toolbar.accountPosted')
          },
          {
            icon: 'wy-icon wy-fanguozhang',
            value: true,
            title: $srv.getI18nByPath('vxe.toolbar.cancelPost')
          }
        ]"
        @on-click="$emit('commit-event', 'accountPost', $event)"
      ></o-tool-button>

      <!-- 结案/反结案 -->
      <o-tool-button
        v-if="
          config.caseclosed &&
            (config.caseclosed.isShow || config.anticlosing.isShow) &&
            config.caseclosed.auth &&
            config.anticlosing.auth
        "
        :disabled="
          config.caseclosed.value
            ? config.caseclosed.isDisable || !config.anticlosing.auth
            : config.caseclosed.isDisable || !config.caseclosed.auth
        "
        :showtitle="showText"
        type="switch"
        :manually="true"
        v-model="config.caseclosed.value"
        :switchlist="[
          {
            icon: 'wy-icon wy-jiean',
            value: false,
            title: $srv.getI18nByPath('vxe.toolbar.caseclosed')
          },
          {
            icon: 'wy-icon wy-fanjiean',
            value: true,
            title: $srv.getI18nByPath('vxe.toolbar.anticlosing')
          }
        ]"
        @on-click="$emit('commit-event', 'caseclose', $event)"
      ></o-tool-button>

      <!-- 冻结/解除冻结 -->
      <o-tool-button
        v-if="
          config.freeze &&
            (config.freeze.isShow || config.unfreeze.isShow) &&
            config.freeze.auth &&
            config.unfreeze.auth
        "
        :disabled="
          config.freeze.value
            ? config.freeze.isDisable || !config.unfreeze.auth
            : config.freeze.isDisable || !config.freeze.auth
        "
        :showtitle="showText"
        type="switch"
        :manually="true"
        v-model="config.freeze.value"
        :switchlist="[
          {
            icon: 'wy-icon wy-dongjie',
            value: false,
            title: $srv.getI18nByPath('vxe.toolbar.freeze')
          },
          {
            icon: 'wy-icon wy-jiechudongjie',
            value: true,
            title: $srv.getI18nByPath('vxe.toolbar.unfreeze')
          }
        ]"
        @on-click="$emit('commit-event', 'freeze', $event)"
      ></o-tool-button>

      <!-- 作废 -->
      <o-tool-button
        v-if="config.void && config.void.isShow && config.void.auth"
        :disabled="config.void.isDisable || !config.void.auth"
        type="button"
        @on-click="$emit('commit-event', 'void')"
        icon="wy-icon wy-zuofei1"
        :title="$srv.getI18nByPath('vxe.toolbar.void')"
        :showtitle="showText"
      >
      </o-tool-button>

      <o-tool-button
        v-if="config.queryLink"
        type="dropdown"
        :select="true"
        :showtitle="showText"
        icon="wy-icon wy-liancharukudan"
        :title="$srv.getI18nByPath('vxe.toolbar.queryLink')"
        @on-click="$emit('commit-event', 'queryLink', $event)"
      >
        <div slot="drop">
          <DropdownItem
            v-for="(item, idx) of config.queryLink"
            :name="idx"
            :key="idx"
            >{{ $srv.getI18nBySrv(item.title) }}</DropdownItem
          >
        </div>
      </o-tool-button>

      <o-tool-button
        v-if="config.selbill"
        type="dropdown"
        :select="true"
        :showtitle="showText"
        icon="wy-icon wy-hexiaodaiban"
        :title="$srv.getI18nByPath('vxe.toolbar.selbill')"
        @on-click="$emit('commit-event', 'selbill', $event)"
      >
        <div slot="drop">
          <DropdownItem
            v-for="(item, idx) of config.selbill"
            :name="idx"
            :disabled="!item.auth"
            :key="idx"
            >{{ $srv.getI18nBySrv(item.id) }}</DropdownItem
          >
        </div>
      </o-tool-button>

      <div v-if="config.addon" class="custom-btn-section">
        <div
          v-for="(item, idx) of config.addon"
          :key="idx"
          class="custom-btn-inner"
        >
          <o-tool-button
            v-if="item.children.length > 0"
            :disabled="!item.auth"
            type="dropdown"
            :select="true"
            @on-click="doCustomBtnAction(idx, $event)"
            :icon="'wy-icon ' + item.icon"
            :title="$srv.getI18nBySrv(item.title)"
            :showtitle="showText"
            v-show="item.isShow"
          >
            <div slot="drop">
              <template v-for="(d, sidx) of item.children">
                <DropdownItem :disabled="!d.auth" :key="sidx" :name="sidx">{{
                  $srv.getI18nBySrv(d.title)
                }}</DropdownItem>
              </template>
            </div>
          </o-tool-button>
          <o-tool-button
            v-else
            type="button"
            @on-click="doCustomBtnAction(idx)"
            :icon="'wy-icon ' + item.icon"
            :title="$srv.getI18nBySrv(item.title)"
            :disabled="!item.auth"
            :showtitle="showText"
            v-show="item.isShow"
          >
          </o-tool-button>
        </div>
      </div>
    </div>

    <!-- 右边 -->
    <div
      class="grid-toolbar-right"
      ref="barRight"
      v-show="showBtns && display.right"
    >
      <slot name="right"></slot>
      <!-- 高级筛选 后期完善-->

      <!-- <o-tool-button
        type="button"
        @on-click="$emit('commit-event', 'filter')"
        :icon="
          'wy-icon ' +
            (filterToolbarStatus ? 'wy-quxiaoshaixuan' : 'wy-shaixuan21')
        "
        :title="$srv.getI18nByPath('vxe.search.advSearch')"
        :class="filterToolbarStatus && 'is-selected'"
        :showtitle="showText"
      >
      </o-tool-button> -->
      <!-- insert -->
      <o-tool-button
        v-if="option.panel"
        :disabled="config.insert.isDisable || !config.insert.auth"
        type="button"
        @on-click="$emit('commit-event', 'insert_actived')"
        icon="wy-icon wy-insert"
        :title="$srv.getI18nByPath('vxe.toolbar.insertRow')"
        :showtitle="showText"
      >
      </o-tool-button>
      <o-tool-button
        color="error"
        v-if="option.panel"
        :disabled="config.delete.isDisable || !config.delete.auth"
        type="button"
        @on-click="$emit('commit-event', $event === null ? 'remove' : $event)"
        icon="wy-icon wy-huishouzhan1"
        :title="$srv.getI18nByPath('vxe.toolbar.removeRow')"
        :showtitle="showText"
      >
      </o-tool-button>
      <!-- 关闭检索 -->
      <!-- <o-tool-button
        type="button"
        icon="wy-icon wy-sousuo13"
        @on-click="$emit('commit-event', 'showSearch', $event)"
        :title="$srv.getI18nByPath('vxe.search.searchCheckConfirm')"
        :showtitle="showText"
      ></o-tool-button> -->

      <!-- importErrorFilter -->
      <o-tool-button
        v-if="config.importErrorFilter.isShow"
        v-show="!option.panel"
        type="checkbox"
        @on-click="$emit('commit-event', 'importErrorFilter', $event)"
        :title="$srv.getI18nByPath('vxe.filter.justlookexception')"
      ></o-tool-button>

      <!-- <Input
        search
        class="grid-search"
        size="small"
        :placeholder="$srv.getI18nByPath('vxe.toolbar.enterContent') + '...'"
        v-model="globalSearchValue"
        @on-search="globalSearch"
        @on-change="globalSeachValChange"
        name="global"
        style="width: 200px"
      /> -->
      <Input
        class="grid-search"
        size="small"
        :placeholder="
          $srv.getI18nByPath(
            `vxe.toolbar.${
              searchType === 'lexicon'
                ? 'enterWordContent'
                : 'enterFuzzyContent'
            }`
          ) + '...'
        "
        v-model="globalSearchValue"
        @on-enter="globalSearch"
        @on-change="globalSeachValChange"
        name="global"
        style="width: 200px"
      >
        <template #append>
          <span
            v-if="searchType === 'lexicon'"
            class="wy-icon wy-minganguanjianzi icon-btn"
            @click="globalSearch"
          ></span>
          <span
            v-else
            class="wy-icon wy-search icon-btn"
            @click="globalSearch"
          ></span>
          <span
            v-if="searchIsSwitch"
            class="wy-icon wy-mti-qiehuan2 icon-btn"
            @click="switchSearchMode"
          ></span>
        </template>
      </Input>
      <!-- 清除所有过滤条件 -->
      <o-tool-button
        v-if="config.refresh.isShow"
        type="button"
        @on-click="$emit('commit-event', 'clearFilters')"
        icon="wy-icon wy-quxiaoshaixuan"
        :title="$srv.getI18nByPath('vxe.toolbar.clearFilter')"
        :showtitle="showText"
      >
      </o-tool-button>

      <!-- QBE搜索表格数据 -->
      <o-tool-button
        v-if="config.qbeSearch.isShow"
        type="button"
        @on-click="$emit('commit-event', 'tableQuery')"
        icon="wy-icon wy-query1"
        :title="$srv.getI18nByPath('vxe.toolbar.QBE')"
        :showtitle="showText"
      >
      </o-tool-button>

      <!-- 条码扫描 -->
      <o-tool-button
        v-if="config.bancodeScan.isShow"
        type="button"
        @on-click="$emit('commit-event', 'bancodeScan')"
        icon="wy-icon wy-saoma"
        :title="$srv.getI18nByPath('vxe.toolbar.bancodeScan')"
        :showtitle="showText"
      >
      </o-tool-button>

      <o-tool-button
        v-if="config.refresh.isShow"
        type="button"
        @on-click="$emit('commit-event', 'reload')"
        icon="wy-icon wy-shuaxin13"
        :title="$srv.getI18nByPath('vxe.toolbar.refresh')"
        :showtitle="showText"
      >
      </o-tool-button>

      <o-tool-button
        v-if="config.print.isShow"
        v-show="config.print.auth && !option.panel"
        type="button"
        @on-click="$emit('commit-event', 'print')"
        icon="wy-icon wy-dayin"
        :title="$srv.getI18nByPath('vxe.toolbar.print')"
        :showtitle="showText"
      >
      </o-tool-button>
      <o-tool-button
        type="dropdown"
        icon="wy-icon wy-guanli"
        :showtitle="false"
        @on-click="$emit('commit-event', $event)"
      >
        <div slot="drop">
          <!-- <DropdownItem
            v-if="config.print.isShow"
            v-show="config.print.auth && !option.panel"
            name="print"
            ><Icon custom="wy-icon wy-dayin" class="drop-icon" /><span>{{
              $srv.getI18nByPath("vxe.toolbar.print")
            }}</span></DropdownItem
          > -->
          <DropdownItem
            v-if="config.import.isShow"
            v-show="config.import.auth && !option.panel"
            name="open_import"
            ><Icon custom="wy-icon wy-daoru10" class="drop-icon" /><span>{{
              $srv.getI18nByPath('vxe.toolbar.import')
            }}</span></DropdownItem
          >
          <DropdownItem
            v-if="config.export.isShow"
            v-show="config.export.auth"
            name="open_export"
            ><Icon custom="wy-icon wy-daochu4" class="drop-icon" /><span>{{
              $srv.getI18nByPath('vxe.toolbar.export')
            }}</span></DropdownItem
          >
          <DropdownItem
            v-if="config.exportXML.isShow"
            v-show="config.exportXML.auth"
            name="export_xml"
            ><Icon custom="wy-icon wy-output-xml" class="drop-icon" /><span>{{
              $srv.getI18nByPath('vxe.toolbar.export_xml')
            }}</span></DropdownItem
          >
        </div>
      </o-tool-button>
      <!-- 
      <o-tool-button
        type="dropdown"
        icon="wy-icon wy-caigouguanli"
        :showtitle="false"
        v-if="graph && graph.length > 0"
      >
        <div class="graph-control" slot="drop">
          <CheckboxGroup
            @on-change="$emit('commit-event', 'setGraphVisible', $event)"
            v-model="graphControl"
          >
            <Checkbox
              :label="item.name"
              v-for="(item, idx) of graph"
              :key="idx"
              :value="item.value"
            >
              <span>{{ $srv.getI18nByPath(item.label) }}</span>
            </Checkbox>
          </CheckboxGroup>
        </div>
      </o-tool-button> -->
    </div>
  </div>
</template>
<script lang="ts">
import { T_srv, Tsrv, vue } from '@/services/index';

@T_srv.comp
export default class BaseGridToolbar extends vue {
  /**
   * props
   */
  @T_srv.prop({
    required: true,
    default: () => {
      return {};
    }
  })
  config!: any;

  @T_srv.prop({
    required: true,
    default: () => {
      return {};
    }
  })
  option!: any;

  @T_srv.prop({
    required: false
  })
  graph!: any;

  @T_srv.prop({
    required: false,
    default: false
  })
  filterToolbarStatus: Boolean;

  @T_srv.prop({
    required: false,
    default: false
  })
  searchMode: Boolean;

  @T_srv.prop({
    required: false,
    default: false
  })
  searchIsSwitch: Boolean;

  @T_srv.watch('graph')
  onGraphChange(val: any) {
    this.graphControl = val
      .filter(item => item.value === true)
      .map(el => el.name);
  }

  private showText: boolean = true;

  private showBtns: boolean = true;

  /**
   * data
   */

  private globalSearchValue: string = '';

  private graphControl = ['table'];

  private fullLeft: number = 0;

  private fullRight: number = 0;

  private miniLeft: number = 0;

  private miniRight: number = 0;

  private toolbar: HTMLElement | null = null;

  private left: HTMLElement | null = null;

  private right: HTMLElement | null = null;

  private isFirst = true;

  private showMiniSearch = true;

  private display = {
    left: true,
    right: true
  };

  get searchType() {
    if (this.searchMode) {
      return 'lexicon';
    }
    return 'text';
  }

  mounted() {
    const that = this;
    setTimeout(() => {
      const erd = that.$elementDetecter();

      that.toolbar = that.$refs.toolbar as HTMLElement;
      that.left = that.$refs.barLeft as HTMLElement;
      that.right = that.$refs.barRight as HTMLElement;
      that.fullLeft = that.getWidth(that.left);
      that.fullRight = that.getWidth(that.right);
      that.miniLeft = 0;
      that.miniRight = 0;

      this.reframe(that.toolbar);
      erd.listenTo(that.toolbar, (el: any) => {
        that.reframe(el);
      });
    }, 0);
  }

  private reframe(el: any) {
    const that = this;
    // tab页签除第一页外，其他页签获取不到 fullLeft 和 fullRight --swc
    if (this.fullLeft === 0 && this.fullRight === 0) {
      this.retrieveHtmlInfo();
      this.miniLeft = that.getWidth(this.left);
      this.miniRight = that.getWidth(this.right);
    }
    if (el.offsetWidth > this.fullLeft + this.fullRight + 30) {
      that.showText = true;
      that.showBtns = true;
    } else {
      that.showText = false;
      if (this.isFirst) {
        this.isFirst = false;
        that.$nextTick(() => {
          this.miniLeft = that.getWidth(this.left);
          this.miniRight = that.getWidth(this.right);
        });
      }
      setTimeout(() => {
        // tab页签除第一页外，其他页签获取不到 miniLeft 和 miniRight  --swc
        if (this.miniLeft === 0 && this.miniRight === 0) {
          this.retrieveHtmlInfo();
          this.miniLeft = that.getWidth(this.left);
        }
        that.showBtns = el.offsetWidth > this.miniLeft + this.miniRight + 30;
      }, 100);
    }
    // 当toolbar为mini时
    this.showMiniSearch = !(el.offsetWidth <= 250);
  }

  private retrieveHtmlInfo() {
    const that = this;
    that.toolbar = that.$refs.toolbar as HTMLElement;
    that.left = that.$refs.barLeft as HTMLElement;
    that.right = that.$refs.barRight as HTMLElement;
    that.fullLeft = that.getWidth(that.left);
    that.fullRight = that.getWidth(that.right);
  }

  public setSearchText(val: string) {
    this.globalSearchValue = val;
  }

  private doCustomBtnAction(index, subIndex = null) {
    if (subIndex !== null) {
      this.$emit(
        'commit-event',
        'customBtnAction',
        this.config.addon[index].children[subIndex]
      );
    } else {
      this.$emit('commit-event', 'customBtnAction', this.config.addon[index]);
    }
  }

  public handleToolDropClick(name: string | null) {
    if (name !== null && name) {
      if (name === 'setup') {
        // 功能配置改在自定义按钮 addFunSetup中执行
        this.funSetUp();
      } else if (name.indexOf('-') > -1) {
        const arr = name.split('-');
        if (arr.length === 2) {
          this.doCustomBtnAction(Tsrv.utils.toNumber(arr[1]));
        } else {
          this.doCustomBtnAction(
            Tsrv.utils.toNumber(arr[1]),
            Tsrv.utils.toNumber(arr[2])
          );
        }
      } else if (name === 'edit') {
        this.config.edit.value = !this.config.edit.value;
        this.$emit('commit-event', name, this.config.edit.value);
      } else if (name === 'requestAudit') {
        this.config.edit.value = !this.config.edit.value;
        this.$emit('commit-event', name, this.config.edit.value);
      } else {
        this.$emit('commit-event', name);
      }
    }
  }

  public handleToolbarDisplay(display: any) {
    if (!Tsrv.noValue(display?.left)) {
      this.display.left = !!display?.left;
    }
    if (!Tsrv.noValue(display?.right)) {
      this.display.right = !!display?.right;
    }
  }

  public getWidth(el: any) {
    return Tsrv.utils.sum(el.children, (e: any) => e.offsetWidth);
  }

  public globalSearch(e) {
    this.$emit('globalSearch', this.globalSearchValue);
  }

  public globalSeachValChange(e) {
    this.$emit('globalSeachValChange', this.globalSearchValue);
  }

  public switchSearchMode() {
    this.$emit('switchSearchMode');
  }

  public funSetUp() {
    Tsrv.utils.createModal('o-setup-panel', null);
  }
}
export interface I_toolBar extends BaseGridToolbar {}
</script>
<style scoped lang="scss">
.base-grid-toolbar {
  width: 100%;
}
.wy-grid ::v-deep .vxe-toolbar .size--mini {
  padding: 0;
}
// .grid-toolbar-left ::v-deep .o-toolbutton {
//   margin: 0px 0px 2px 0px;
// }
// .grid-toolbar-right ::v-deep .o-toolbutton {
//   margin: 0;
// }

.base-grid-toolbar ::v-deep {
  .custom-btn-section {
    float: right;
    .custom-btn-inner {
      float: left;
    }
  }
  .drop-icon {
    margin-right: 8px;
  }
  .grid-toolbar-right {
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    .ivu-input-search-icon {
      margin-right: 3px;
    }
  }
  .grid-toolbar-left {
    position: absolute;
    left: 7px;
    top: 0;
    height: 100%;
  }
  .graph-control {
    width: 110px;
    .ivu-checkbox-group-item {
      margin: 2px 10px;
    }
  }
  .o-toolbutton {
    .disabled {
      // $color: var(--basegrid-toolbar-btn-fontColor);
      // color: rgba($color, 0.1);
      background-color: transparent;
    }
    .titbtn {
      &:hover:not(.disabled) {
        color: var(--basegrid-toolbar-btn-hover-font-color);
        background-color: var(--basegrid-toolbar-btn-hover-bg-color);
      }
    }
  }

  .grid-search {
    .ivu-input-group-append {
      padding: 0 2px 0 0;
      border-radius: 0 24px 24px 0;
      .icon-btn {
        padding: 0 2px;

        &:hover {
          color: #3693ff;
          cursor: pointer;
        }
      }

      .icon-btn + .icon-btn {
        border-left: 1px solid #ccc;
      }
    }
  }
}
.is-selected {
  ::v-deep button {
    color: #3693ff;
  }
}
</style>
